<template>
	<view class="pagebox">
	
		<view class="numberline">
			No:{{pro.id}}   时间: {{pro.createTime}}
		</view>
		<view class="infobox">
			<view class="line"></view>
			<view class="info">
				<view class="iteminfo">
					<view class="label">
					昵称:
					</view>
				    <input class="value"  :class="!isread?'change':''" :focus='!isread' type="text" v-model="pro.memberName"  :disabled='isread'/>
				</view>
				<view class="iteminfo">
					<view class="label">
						性别:
					</view>
					<picker @change="selectsex" :disabled='isread' :value="sexindex" :range="sexlist" range-key="label">
						<view  class="value" :class="!isread?'change':''">{{sexlist[sexindex].label}}</view>
					</picker>
				</view>
				<view class="iteminfo">
					<view class="label">
						出生年月日:
					</view>
					<picker mode="date" :disabled='isread' :value="date" start="1919-10-1" end="2025-09-30" @change="selectage">
						<view class="value" :class="!isread?'change':''">{{pro.birthday||''}}</view>
					</picker>
				</view>
				<view class="iteminfo">
					<view class="label">
					身高(cm):
					</view>
				    <input class="value"  :class="!isread?'change':''"  type="text" v-model="pro.shengao"  :disabled='isread'/>
				</view>
				<view class="iteminfo">
					<view class="label">
					体重(kg):
					</view>
				    <input class="value"  :class="!isread?'change':''"  type="text" v-model="pro.tizhong"  :disabled='isread'/>
				</view>
				<view class="iteminfo">
					<view class="label">
					腰围(cm):
					</view>
				    <input class="value"  :class="!isread?'change':''"  type="text" v-model="pro.yaowei"  :disabled='isread'/>
				</view>
				<view class="iteminfo">
					<view class="label">
					臀围(cm):
					</view>
				    <input class="value"  :class="!isread?'change':''"  type="text" v-model="pro.tunwei"  :disabled='isread'/>
				</view>
				<view class="iteminfo">
					<view class="label">
						吸烟:
					</view>
					<picker @change="selectsmoke" :disabled='isread' :value="smokeindex" :range="smokelist">
						<view  class="value" :class="!isread?'change':''">{{smokelist[smokeindex]}}</view>
					</picker>
				</view>
				<view class="iteminfo">
					<view class="label">
						饮酒:
					</view>
					<picker @change="selectdrinks" :disabled='isread' :value="drinkindex" :range="drinkslist">
						<view  class="value" :class="!isread?'change':''">{{drinkslist[drinkindex]}}</view>
					</picker>
				</view>
			
				<view class="iteminfo">
					<view class="label">
						病症:
					</view>
					<picker @change="selectbing" :disabled='isread' :value="bingindex" :range="binglist" range-key="dictValue">
						<view  class="value" :class="!isread?'change':''">{{binglist[bingindex].dictValue}}</view>
					</picker>
				</view>
				<view class="iteminfo">
					<view class="label">
						病程:
					</view>
					<picker @change="selectbingcheng" :disabled='isread' :value="yearindex" :range="yearlist">
						<view  class="value" :class="!isread?'change':''">{{yearlist[yearindex]}}</view>
					</picker>
				</view>
				<view class="iteminfo">
					<view class="label">
						工作性质:
					</view>
					<picker @change="selectwork" :disabled='isread' :value="workindex" :range="worklist">
						<view  class="value" :class="!isread?'change':''">{{worklist[workindex]}}</view>
					</picker>
				</view>
				
				<view class="iteminfo">
					<view class="label">
						会员等级:
					</view>
					<view class="value">
					{{pro.memberLevel==1?'普通用户':pro.memberLevel==3?'专病服务':pro.memberLevel==4?'银卡会员':pro.memberLevel==5?'金卡会员':pro.memberLevel==5?'黑卡会员':''}}
					</view>
				</view>
				
			</view>
		</view>
		
		<view class="box">
			<view class="itemline">
				<view class="label">
					手机：
				</view>
				<view class="value">
					{{pro.memberPhone}}
				</view>
				
			</view>
			<view class="itemline">
				<view class="label">
					地区：
				</view>
				<picker mode="region"   :value="pro.memberAddrerss"  @change="selectaddress" :disabled='isread'>
										<view class="uni-input" :class="!isread?'change':''">{{pro.memberAddrerss||'填写地址'}}</view>
									</picker>
			
			</view>
			<view class="boxtitle">
				概况：
			</view>
		    <textarea class="txt" :class="!isread?'change':''" v-model="pro.memberJianjie" :disabled='isread' cols="30" rows="10"></textarea>
		</view>
		
		
		<view class="vipbox" >
			<view class="viptitle">
				当前权益
			</view>
			<view class="putong" v-if="pro.memberLevel!=3">
				{{pro.memberLevel==1?'普通用户':pro.memberLevel==3?'专病服务':pro.memberLevel==4?'银卡会员':pro.memberLevel==5?'金卡会员':pro.memberLevel==5?'黑卡会员':''}}
			</view>
			<view class="vipcontentbox" v-if="pro.memberLevel==3">
				<view class="yuan">
					<view class="iconfont icon-fuwu1">
						
					</view>
				</view>
				<view class="contentbox">
					<view class="name">
						专病服务 <view class="lever">
							 年度服务
						</view>
					</view>
					<view class="content">
						享受专家团队一整年的持续健康管理服务，满足长期慢病管理需求，帮助用户长期维持健康状态。
					</view>
					<view class="line">
						用户{{pro.memberName||'新用户'}}专病服务 第 <view class="num">{{yifuwu}}</view>天 剩余 <view class="sheng">{{shengyu}}</view>天
					</view>
				</view>
			</view>
		</view>

	

		<view class="pagebtn" v-if="isread" @click="changeinfo">
			修改资料
		</view>
		<view class="pagebtn" v-if="!isread" @click="saveinfo">
			保存
		</view>
		
		
	</view>
</template>

<script>
	import {getInfo,uploadInfo,getDictData} from '../../utils/api.js'
export default {
  data() {
    return {
		isread:true,
		pro:{},
		yifuwu:'',
		shengyu:"",
		sexlist:[
			{
				type:'男',
				label:'男'
			},
			{
				type:'女',
				label:'女'
			}
		],
		sexindex:'',
		smokelist:['吸烟','不吸烟','已戒烟'],
		smokeindex:'',
		drinkslist:['饮酒','不饮酒','已戒酒'],
		drinkindex:'',
		yearlist:[
			'1年',
			'2年',
			'3年',
			'4年',
			'5年',
			'6年',
			'7年',
			'8年',
			'9年',
			'10年',
			'10年以上',
			],
			yearindex:'',
			binglist:[],
			bingindex:'',
			bingzheng:'',
		worklist:['办公','居家','轻体力工作','重体力工作'],
		workindex:''
		
		
		
    }
  },
  onShow() {
	  let c={
	  	type:'sys_yishengzhuzhibingzheng'
	  }
	  getDictData(c).then(res=>{
	  	this.binglist=res.data.data
	  })
	  let p={
		  phone:uni.getStorageSync('phone')
	  }
  	getInfo(p).then(res=>{
		console.log(res,'个人信息')
		this.yifuwu=res.data.data.cpServiceCurrentDays
		this.shengyu=res.data.data.cpServiceRemainingDays
		
		this.pro=res.data.data.info
		delete this.pro.imgUrl
		let pro=res.data.data.info
		//性别
		if(pro.memberSex){
			this.sexindex=this.sexlist.findIndex(i => i.type == pro.memberSex)
		}
		//吸烟
		if(pro.isxiyan){
			this.smokeindex=this.smokelist.findIndex(i => i == pro.isxiyan)
		}
		//喝酒
		if(pro.isyinjiu){
			this.drinkindex=this.drinkslist.findIndex(i => i == pro.isyinjiu)
		}
		//症状
		if(pro.memberZhengzhuang){
			this.bingindex=this.binglist.findIndex(i => i.dictValue == pro.memberZhengzhuang)
			console.log(this.bingindex)
		}
		//病程
		if(pro.memberBingcheng){
			this.yearindex=this.yearlist.findIndex(i => i == pro.memberBingcheng)
		}
		//工作性质
		if(pro.workxingzhi){
			this.workindex=this.worklist.findIndex(i => i == pro.workxingzhi)
		}
	})
  },
 
  methods: {
	  
	  //选择工作内容
	  selectwork(e){
		  console.log(this.worklist[e.detail.value])
		 this.workindex=e.detail.value 
		 this.pro.workxingzhi=this.worklist[e.detail.value]
	  },
	  
	  
	  //选择病程
	  selectbingcheng(e){
		  this.yearindex=e.detail.value
		  this.pro.memberBingcheng=this.yearlist[e.detail.value]
	  },
	  //选择病症
	  selectbing(e){
		  let index=e.detail.value
		  this.bingindex=index
		  this.pro.memberZhengzhuang=this.binglist[this.bingindex].dictValue
	  },
	  
	  //选择喝酒
	  selectdrinks(e){
		  this.drinkindex=e.detail.value
		  this.pro.isyinjiu=this.drinkslist[e.detail.value]
	  },
	  
	  //选择吸烟
	  selectsmoke(e){
		  this.smokeindex=e.detail.value
		  this.pro.isxiyan=this.smokelist[e.detail.value]
	  },
	  //选择出生日期
	  selectage(e){
		  this.pro.birthday=e.detail.value
	  },
	  
	  //选择性别
	  selectsex(e){
		  this.sexindex=e.detail.value
		   this.pro.memberSex=this.sexlist[e.detail.value].type	
	  },
	  
	  //选择地址
	  selectaddress(e){
		  console.log(e)
		  this.pro.memberAddrerss=e.detail.value.join('/')
	  },
	  //是否编辑
	 changeinfo(){
		 this.isread=false
	 },
	 
	 saveinfo(){
		 let that=this
		 uni.showModal({
		 	title: '提示',
		 	content: '保存更改',
		 	success: function (res) {
		 		if (res.confirm) {
		 			let p=that.pro
		 			uploadInfo(p).then(res=>{
		 			  console.log(res)
					   if(res.data.code==200){
						     that.isread=true
							 uni.showToast({
							 	title: '修改成功',
								icon:'none',
							 	duration: 1000
							 });
							let a={
								  phone:uni.getStorageSync('phone')
							  }
							getInfo(a).then(res=>{
								console.log(res,'个人信息')
								that.pro=res.data.data.info
							})

					   }
		 			})
					
		 		} else if (res.cancel) {
		 			console.log('用户点击取消');
		 		}
		 	}
		 });

		
		
	 }
  }
}
</script>

<style lang="less" scoped>
   .pagebox{
	   width: 750rpx;
	   box-sizing: border-box;
	 background: linear-gradient(180deg, rgba(242,248,255,1) 0%,rgba(255,255,255,0) 76%);
	   box-sizing: border-box;
	   padding: 20rpx;
	   padding-bottom: 200rpx;
	   .titleline{
		   font-size: 34rpx;
		   font-weight: bold;
		   line-height: 2.8;
		   
	   }
	   .numberline{
		   font-size: 26rpx;
		   font-weight: bold;
		   
	   }
	   .infobox{
		   width: 100%;
		    border-top: 8rpx solid #1a4f8a; 
		   margin-top: 30rpx;
		   .line{
			   width: 100%;
			   height: 2rpx;
			   background-color: #1a4f8a;
			   margin-top: 4rpx;
		   }
		   .info{
			   width: 100%;
			   display: flex;
			   flex-wrap: wrap;
			   justify-content: space-evenly;
			   .iteminfo{
				   display: flex;
				   align-items: center;
				   font-size: 26rpx;
				   font-weight: bold;
				   line-height: 44rpx;
				   height: 44rpx;
				   margin: 20rpx 0;
				   width: 49%;
				   justify-content: left;
				  
				   .label{
					    text-align: left;
						width: 150rpx;
				   }
				   .change{
					   background-color: #c1c1c1 !important;
				   }
				   .value{
					   color: #1a4f8a ;
					   width: 180rpx;
					   line-height: 44rpx;
					   height: 44rpx;
					  
				   }
			   }
		   }
	   }
	   .box{
		   width: 100%;
		   margin: 20rpx 0;
		   background-color: white;
		   box-sizing: border-box;
		   padding: 20rpx;
		   .itemline{
			   display: flex;
			   align-items: center;
			    font-weight: bold;
				font-size: 28rpx;
				line-height: 2.4;
			   .label{
				   margin-right: 20rpx;
			   }
			   .value{
				   color: #1a4f8a;
			   }
		   }
		   .boxtitle{
			   font-weight: bold;
			   font-size: 28rpx;
		   }
		   .txt{
			   width: 100%;
			   background-color: whitesmoke;
			   font-weight: bold;
			   font-size: 26rpx;
			   box-sizing: border-box;
			   padding: 20rpx;
		   }
	   }
	   .vipbox{
		   width: 100%;
		   background-color: white;
		   box-sizing: border-box;
		  
		   margin: 20rpx 0;
		   .viptitle{
			   font-weight: bold;
			   border-left: 8rpx solid #1a4f8a;
			   margin: 30rpx ;
			   padding-left: 20rpx;
		   }
		   .putong{
			   margin-top: 20rpx;
			   font-size: 28rpx;
			   color: gray;
		   }
		   .vipcontentbox{
			   display: flex;
			   align-items: flex-start;
			   .yuan{
				   width: 80rpx;
				   height: 80rpx;
				   border-radius: 50%;
				   background: whitesmoke;
				   text-align: center;
				   line-height: 80rpx;
				   .iconfont{
					   font-size: 40rpx;
					   color: #1a4f8a;
				   }
			   }
			   .contentbox{
				   flex: 1;
				   font-size: 30rpx;
				   box-sizing: border-box;
				   padding: 20rpx;
				   font-weight: bold;
				   line-height: 2;
				   .name{
					   display: flex;
					   align-items: center;
					   .lever{
						   font-size: 28rpx;
					   }
				   }
				   .line{
					   display: flex;
					   align-items: center;
					   font-size: 26rpx;
					   color: gray;
					   .num{
						   font-size: 32rpx;
						   color: black;
					   }
					   .sheng{
						   font-size: 32rpx;
						   color: red;
					   }
				   }
			   }
			   
		   }
	   }
	   
	   .pagebtn{
		   width: 90%;
		   height: 80rpx;
		   position: fixed;
		    left: 5%;
			bottom: 40rpx;
		   text-align: center;
		   border-radius: 40rpx;
		   color: white;
		   line-height: 80rpx;
		   background-color: #1a4f8a;
		   font-size: 28rpx;
	   }
	  
	  
   }
</style>
